import * as echarts from 'echarts'
import { useEffect, useRef, useState } from 'react'
import './index.scss'
export default function PieChart({ data }) {
    const graphRef = useRef(null)
    const [myChart, setMyChart] = useState()
    const colors = ['#165DFF', '#2CB8C5', '#F0B114', '#885BD2', '#B6D8F3']
    let timer = useRef(null)
    const resizeObserver = new ResizeObserver(entries => {
        timer && clearTimeout(timer)
        timer = setTimeout(() => {
            myChart && myChart.resize();
        }, 100)
    });
    useEffect(() => {
        setMyChart(echarts.init(graphRef.current))
    }, [])
    const renderChart = () => {
        const option = {
            color: colors,
            tooltip: {
                trigger: 'item',
                padding: 0,
                borderWidth: 0,
                formatter: (params) => {
                    return `<div class="tooltip-area"><p>${params.marker}${params.name}</p><h4>${params.percent}%</h4></div>`
                },
            },
            legend: {
                show: false
            },
            title: {
                text: data.total.title,
                textStyle: {
                    color: 'rgba(28, 31, 35, 0.80)',
                    fontSize: '12px',
                    fontWeight: 'normal'
                },
                subtext: data.total.figure,
                subtextStyle: {
                    color: '#1C1F23',
                    fontSize: '20px',
                    fontWeight: '600'
                },
                top: "center",
                left: 'center'
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: ['30%', '45%'],
                    avoidLabelOverlap: false,
                    label: {
                        formatter: `{a|{b}}: {b|{d}%}`,
                        alignTo: 'labelLine',
                        rich: {
                            a: {
                                color: 'rgba(28, 31, 35, 0.80)',
                                fontSize: '12px',
                            },
                            b: {
                                color: '#1C1F23',
                                fontSize: '14px',
                                fontWeight: '600'
                            }
                        }
                    },
                    labelLine: {
                        lineStyle: {
                            cap: 'round'
                        }
                    },
                    data: data.data
                }
            ]
        };
        option && myChart.setOption(option);
    }
    useEffect(() => {
        // 保证dom可用 才进行图表的渲染
        console.log(data)
        myChart && renderChart()
        resizeObserver.observe(graphRef.current);
        return () => resizeObserver.disconnect();
    }, [myChart,data])
    return (
        <div ref={graphRef} style={{ width: '100%', height: '100%' }}></div>
    )
}
